<script setup>
import { ref } from 'vue'
import {} from '@element-plus/icons-vue'
const props = defineProps(['isCollapse', 'asideWidth', 'menus'])
const menusInfo = ref(props.menus)
</script>
<template>
    <el-scrollbar>
        <el-menu style="height: 100%;" :default-openeds="['2']" background-color="rgb(47, 65, 86)" text-color="#fff"
            active-text-color="rgb(103, 194, 58)" :collapse-transition="true" :collapse="props.isCollapse" router>
            <div style="height: 60px; line-height: 60px; text-align: center;">
                <img src="@/assets/img/logo.ico" alt="" style="width: 20px;position: relative; top:5px; margin-right: 5px;">
                <b style="color: rgb(103, 194, 58); margin-right: 30px;" v-show="!props.isCollapse">后台管理系统</b>
            </div>
            <div v-for="item in menusInfo" :key="item.id">
                <!-- 如果路径为空，就是一级菜单 -->
                <el-menu-item v-if="item.path !== ''" :index="item.path">
                    <component :is="item.icon" style="width: 18px; margin-right: 8px;"></component>
                    <span>{{ item.name }}</span>
                </el-menu-item>

                <!-- 二级菜单 -->
                <el-sub-menu v-else index="2">
                    <template #title>
                        <component :is="item.icon" style="width: 18px; margin-right: 8px;"></component>
                        <span>{{ item.name }}</span>
                    </template>

                    <div v-for=" subitem in item.children" :key="subitem.id">
                        <el-menu-item :index="subitem.path">
                            <component :is="subitem.icon" style="width: 18px; margin-right: 8px;"></component>
                            <span>{{ subitem.name }}</span>
                        </el-menu-item>
                    </div>

                </el-sub-menu>
            </div>

        </el-menu>
    </el-scrollbar>
</template>
<style scoped></style>